<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李伟</title>
    <link rel="stylesheet" href="./swiper.min.css">
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .nav {
            width: 100%;
            height: 162px;
            text-align: center;
            font-size: 12px;
        }

        a {
            text-decoration: none;
        }

        .nav li {
            width: 20%;
            height: 74px;
            float: left;
        }

        .nav li img {
            width: 40px;
        }

        .nav span {
            display: block;
            color: #6666;
        }

        .open {
            width: 100%;
            height: 44px;
            background-color: #232326;
            color: #fff;
            display: flex;
        }

        .open li {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .open li:nth-child(1) {
            width: 8%;
        }

        .open li:nth-child(1) img {
            width: 10px;
        }

        .open li:nth-child(2) {
            width: 10%;
        }

        .open li:nth-child(2) img {
            width: 30px;
        }

        .open li:nth-child(3) {
            width: 57%;
        }

        .open li:nth-child(4) {
            width: 25%;
            background-color: #cd2323;
        }

        .sousuo-wrapper {
            width: 100%;
            height: 44px;
            background-color: #c82519;
            color: #fff;
            display: flex;
            align-items: center;
        }

        .bth,
        .denglu {
            width: 44px;
            height: 44px;
        }

        .sousuo {
            flex: 1;
            background-color: #fff;
            height: 30px;
            border-radius: 15px;
        }

        .denglu {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bth span {
            margin: 12px 0 0 10px;
            width: 20px;
            height: 20px;
            display: block;
            background: url(zuo.png) no-repeat;
            background-size: 100% 100%;
        }

        .jd {
            width: 20px;
            height: 15px;
            background: url(xb.png) no-repeat;
            background-size: 200px;
            margin: 8px 8px 0px 15px;
            position: relative;
            z-index: 1;
            float: left;
        }

        .fangdajing {
            width: 18px;
            height: 15px;
            background: url(xb.png) no-repeat;
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
            position: relative;
            z-index: 1;
            float: left
        }

        .jd::after {
            content: '';
            display: block;
            width: 1px;
            height: 15px;
            background-color: #dddddd;
            position: relative;
            left: 30px;
        }

        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .sousuo-wrapper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .swp1 img {
            width: 80%;
        }
        .bottom {
            height: 8%;
            width: 100%;
            background-color: rgb(255, 255, 255);
            position: fixed;
            bottom: 0px;
            z-index: 10;
        }

        .b-i {
            height: 100%;
        }

        .bottom-icon {
            width: 20%;
            height: 100%;
            float: left;
            list-style: none;
            text-align: center;
        }

        .bottom-icon a {
            height: 100%;
            display: block;
        }

        .bottom-icon a img {
            height: 100%;
        }
    </style>
    </head>
    <body>
        <ul class="open">
            <li><img src="x.png" alt=""></li>
            <li><img src="11.png" alt=""></li>
            <li>打开京东APP，购物更轻松</li>
            <li>立即打开</li>
        </ul>
        <div class="sousuo-wrapper">
            <div class="bth">
                <span></span>
            </div>
            <div class="sousuo">
                <div class="jd"></div>
                <div class="fangdajing"></div>
            </div>
            <div class="denglu">登录</div>
        </div>
        <div class="swiper-container swp1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./ppt.dpg"></div>
                <div class="swiper-slide"><img src="./ppt1.jpg"></div>
                <div class="swiper-slide"><img src="./ppt2.dpg"></div>
            </div>
            </div>
            <div class="swiper-container swp2">
                <div class="swiper-wrapper">
            <ul class="nav">
                <ul class="nav-1">
                    <li><a href="j"><img src="1.png" alt=""><span>京东超市</span></a>
                    </li>
                    <li><a href="j"><img src="2.png" alt=""><span>数码电器</span></a>
                    </li>
                    <li><a href="j"><img src="3.png" alt=""><span>京东服饰</span></a>
                    </li>
                    <li><a href="j"><img src="4.png" alt=""><span>京东生鲜</span></a>
                    </li>
                    <li><a href="j"><img src="5.png" alt=""><span>京东到家</span></a>
                    </li>
                    <li><a href="j"> <img src="6.png" alt=""><span>充值缴费</span></a>
                    </li>
                    <li><a href="j"> <img src="7.png" alt=""><span>9.9元拼</span></a>
                    </li>
                    <li><a href="j"><img src="8.png" alt=""><span>领券</span></a>
                    </li>
                    <li><a href="j"><img src="9.png" alt=""><span>领金贴</span></a>
                    </li>
                    <li><a href="j"><img src="10.png" alt=""><span>PLUS会员</span></a>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <ul class="b-i">
                    <li class="bottom-icon"><a href=""><img src="C:\Users\李伟\Desktop\bootstrap\01.png" alt=""></a></li>
                    <li class="bottom-icon"><a href=""><img src="C:\Users\李伟\Desktop\bootstrap\03 (2).png" alt=""></a></li>
                    <li class="bottom-icon"><a href=""><img src="C:\Users\李伟\Desktop\bootstrap\03 (1).png" alt=""></a></li>
                    <li class="bottom-icon"><a href=""><img src="./04.png" alt=""></a></li>
                    <li class="bottom-icon"><a href=""><img src="./05.png" alt=""></a></li>
                </ul>
            </div>
        </div>
                <script src="./swiper.min.js"></script>
                <script>
                    var swiper = new Swiper('.swp1', {
                        autoplay: true,
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    });
                </script>
                                <script>
                                    var swiper = new Swiper('.swp2', {
                                        autoplay: true,
                                        pagination: {
                                            el: '.swiper-pagination',
                                        },
                                    });
                                </script>
    </body>
</html>